<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" size="medium">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="入库单号" prop="code">
          <el-input v-model="ruleForm.code" placeholder="可不填写，自动生成" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="*入库单类型" prop="stId">
          <el-select v-model="ruleForm.stId" placeholder="请选择入库类别" clearable>
            <el-option label="采购入库" value="1"></el-option>
            <el-option label="销售出库" value="2"></el-option>
            <el-option label="其它入库" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="关联订单号" prop="associatedOrderNumber">
          <el-input v-model="ruleForm.associatedOrderNumber" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="*供应商编号" prop="supplierId">
          <el-input v-model="ruleForm.supplierId" placeholder="请输入关键词搜索或者双击选择"  />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="*供应商名称" prop="supplierName">
          <el-input v-model="ruleForm.supplierName" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="供应商联系人" prop="supplierContacts">
          <el-input v-model="ruleForm.supplierContacts" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="*供应商联系方式" prop="supplierPhone">
          <el-input v-model="ruleForm.supplierPhone" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="制单人" prop="preparedName">
          <el-input v-model="ruleForm.preparedName" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="制单时间" prop="preparedTime">
          <el-date-picker v-model="ruleForm.preparedTime" type="date" placeholder="选择制单时间" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注信息" :maxlength="300" show-word-limit />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="text-align: right;">
        <el-button type="primary" @click="">提交</el-button>
      </el-col>
    </el-row>
  </el-form>

  <!-- 供应商选择弹窗 -->
  <el-dialog v-model="dialogVisible" title="选择供应商" width="600px">
    <el-table :data="supplierList" style="width: 100%" >
      <el-table-column prop="supplierCode" label="供应商编号" width="120" />
      <el-table-column prop="supplierName" label="供应商名称" />
      <el-table-column prop="supplierContact" label="联系人" />
      <el-table-column prop="supplierTel" label="联系方式" />
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button size="small" >选择</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-table :data="tableData" border style="width: 100%; margin-bottom: 20px;">
    <el-table-column prop="associatedOrderNumber" label="订单号" width="130" />
    <el-table-column prop="productCode" label="产品编码" width="130"/>
    <el-table-column prop="productName" label="产品名称" width="130" />
    <el-table-column prop="specifications" label="规格"  width="130" />
    <el-table-column prop="bacth" label="批次" width="130" />
    <el-table-column prop="price" label="单价" width="130" />
    
    <el-table-column prop="incomingQuantity" label="入库数量" width="130" />
    <el-table-column label="总价格" width="130">
  <template #default="scope">
    {{ (Number(scope.row.price) * Number(scope.row.incomingQuantity)).toFixed(2) }}
  </template>
</el-table-column>
    <el-table-column prop="supplierName" label="供销商名称" width="130" />
    <el-table-column prop="locationName" label="库位名称" width="130" />
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-button type="text" @click="(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" @click="">新增产品
    
  </el-button>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { http } from '@/axios/axiosHelpers'
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  code: '',
  stId: '',
  bacth: '2025-7-25',
  associatedOrderNumber: '',
  supplierId: '',
  supplierName: '',
  supplierContacts: '',
  supplierPhone: '',
  preparedName: '',
  preparedTime: '',
  remark: ''
})
//产品显示列表
const page = ref({
  PageIndex: 1,
  PageSize: 10,
  pageCount: 0,
  totaCount: 0,
})
const tableData =ref([]);
onMounted(()=>{
  tableDataData();
})
const tableDataData = () => {
  const params: any = {
    PageIndex: page.value.PageIndex,
    PageSize: page.value.PageSize,
  };
  http.get("/shangyou/api/Stocking/GetProduct",{params})
  .then(res=>{
      tableData.value = res.data.pageData;
      page.value.pageCount = res.data.pageCount;
      page.value.totaCount = res.data.totaCount;
   })
}
const supplierList = ref([])
const rules = reactive<FormRules>({
  code: [{ required: true, message: '请输入入库单号', trigger: 'blur' }],
  stId: [{ required: true, message: '请选择入库单类型', trigger: 'change' }],
  associatedOrderNumber: [{ required: true, message: '请输入关联订单号', trigger: 'blur' }],
  supplierId: [{ required: true, message: '请输入供应商编号', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
  supplierContacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  supplierPhone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  preparedName: [{ required: true, message: '请输入制单人', trigger: 'blur' }],
  preparedTime: [{ required: true, message: '请选择制单时间', trigger: 'change' }],
  remark: [{ required: false, message: '', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("/read/api/WarehouseStoking/AddStocking", ruleForm)
        .then(res => {
          if (res.data.code == 200) {
            ElMessage.success("入库单创建成功！")
          } else {
            ElMessage.error("入库单创建失败！")
          }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
const submitForm=()=>{
  ElMessage.success('提交成功');
}



const supplierList = ref([])
const SupplierListData = () => {
  http.get("/shangyou/api/Supplier/GetSupplier")
    .then(res => {
      supplierList.value = res.data.data
    })
}
const dialogVisible = ref(false)

const openSupplierDialog = () => {
  dialogVisible.value = true
}
const handleSupplierSelect = (row: any )=> {
  ruleForm.supplierId = row.supplierCode
  ruleForm.supplierName = row.supplierName
  ruleForm.supplierContacts = row.supplierContact
  ruleForm.supplierPhone = row.supplierTel
  dialogVisible.value = false
}

onMounted(() => {
  SupplierListData()
  ruleForm.code = getOrderNo()
})

const getOrderNo = () => {
  const now = new Date();
  const pad = (n: number) => n.toString().padStart(2, '0');
  const year = now.getFullYear();
  const month = pad(now.getMonth() + 1);
  const day = pad(now.getDate());
  const hour = pad(now.getHours());
  const minute = pad(now.getMinutes());
  const second = pad(now.getSeconds());
  return `RK${year}${month}${day}${hour}${minute}${second}`;
}

const productList = ref([
  {
    name: '设备箱',
    code: '000187',
    spec: '10040100',
    batch: '',
    price: 0,
    quantity: 0,
    location: '',
  },
  {
    name: 'J29B 浩方移动电源',
    code: '000180',
    spec: '个',
    batch: '',
    price: 0,
    quantity: 0,
    location: '',
  }
])

const calcTotal = (row: any) => {
  return (Number(row.price) * Number(row.quantity)).toFixed(2)
}
const dialogVisibles = ref(false)
const addProduct = () => {
  dialogVisibles.value = true
  axios.get("")
}

const removeProduct = (index: number) => {
  productList.value.splice(index, 1)
}

const selectLocation = (row: any) => {
  row.location = '选中库位'
}
const orderTypeOptions = [
  { label: '采购入库', value: 'purchase' },
  { label: '退货入库', value: 'return' },
  { label: '调拨入库', value: 'transfer' }
]
const orderType = ref('purchase')
const handleOrderTypeChange = (val: string) => {
  orderType.value = val
}
}
</script>